<template>
  <div class="box-content">
    <a-form-model class="form" :model="form" style="overflow: hidden">
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="信息标题" required>
            <a-input v-model="form.title" placeholder="请输入信息标题" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="反映人类型">
            <s-select
              :selectOption="socialPublic.reflectionType"
              v-model="form.reflectionType"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="上报人" required>
            <a-input v-model="form.unit" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="主题类型" required>
            <a-tree-select
              style="width: 200px"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              :tree-data="treeData"
              tree-default-expand-all
              :treeIcon="true"
              :showSearch="false"
              v-model="form.topicTypeVal"
            >
            </a-tree-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="紧急程度" required>
            <a-select v-model="form.urgent">
              <a-select-option value="">=请选择= </a-select-option>
              <a-select-option value="0">非常紧急</a-select-option>
              <a-select-option value="1">一般紧急</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="是否联名" required>
            <a-radio-group v-model="form.jointly">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="12" v-if="form.jointly">
          <a-form-model-item label="联名人" required>
            <selectUser @selectFunc="handleOk" :single="false" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-form-model-item label="附件" style="margin: 15px 0px">
        <a-upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :multiple="true"
          :file-list="fileList"
          @change="handleChange"
        >
          <a-button> <a-icon type="upload" /> Upload </a-button>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item label="信息内容" required>
        <a-textarea placeholder="信息内容" :rows="8" style="height: 400px" />
      </a-form-model-item>
      <div class="form-footer">
        <a-button type="primary" @click="onSubmit"> 发布 </a-button>
        <a-button type="primary" @click="onSubmit"> 暂存 </a-button>
        <a-button style="margin-left: 10px" @click="$router.back()">
          取消
        </a-button>
      </div>
    </a-form-model>
  </div>
</template>
<script>
import { socialPublic } from 'assets/js/select-option-list'
import selectUser from 'components/base/selectUser'
export default {
  components: { selectUser },
  data() {
    return {
      myVisible: false, //上报人弹框
      socialPublic,
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      plainOptions: [
        { label: '请选择', value: '' },
        { label: '党派', value: '党派' },
        { label: '团体', value: '团体' },
        { label: '专委会', value: '专委会' },
        { label: '界别', value: '界别' },
        { label: '当前届次委员', value: '当前届次委员' },
        { label: '往届委员', value: '往届委员' },
        { label: '机关工作人员', value: '机关工作人员' }
      ],
      treeData: [
        {
          title: '=主题类型=',
          value: '',
          key: '1'
        },
        {
          title: '文化建设',
          value: '文化建设',
          key: '2',
          children: [
            {
              value: '街道文化建设',
              key: '2-1',
              title: '街道文化建设'
            }
          ]
        },
        {
          title: '经济建设',
          value: '经济建设',
          key: '3'
        },
        {
          title: '政协建设',
          value: '政协建设',
          key: '4'
        }
      ],
      form: {
        name: undefined,
        region: undefined,
        date1: undefined,
        delivery: false,
        type: undefined,
        resource: '',
        desc: '',
        remind: false,
        reflectionType: '',
        topicTypeVal: '',
        urgent: '',
        jointly: 1
      },
      fileList: []
    }
  },
  methods: {
    handleOk(val){
      console.log(val)
    },
    onSubmit() {
      console.log('submit!', this.form)
    },
    handleChange(info) {
      let fileList = [...info.fileList]

      // 1. Limit the number of uploaded files
      //    Only to show two recent uploaded files, and old ones will be replaced by the new
      fileList = fileList.slice(-2)

      // 2. read from response and show file link
      fileList = fileList.map((file) => {
        if (file.response) {
          // Component will show file.url as link
          file.url = file.response.url
        }
        return file
      })

      this.fileList = fileList
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-calendar-picker-input {
  line-height: 40px;
}
.box-content {
  padding-right: 20px;
}
/deep/ .ant-select {
  color: #333;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
}
/deep/ .ant-select-selection {
  border-radius: 2px;
  height: 40px;
}
/deep/ .ant-select-selection__rendered {
  line-height: 38px;
}
</style>